<DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        .box {
            position: relative;
            background-color: rgb(255, 254, 254);
            width: 1200px;
            height: 850px;
            box-shadow: 0 0 12px grey;
            top: 30px;
            margin: 0 auto;
        }
        
        .box1 {
            background-color: #cccccc;
            box-shadow: 0 0 30px grey;
            position: absolute;
            left: 200px;
            bottom: 300px;
            z-index: 1;
        }
        
        .box2 {
            background-color: #e7d0cc;
            width: 350px;
            height: 290px;
            position: absolute;
            left: 260px;
            bottom: 100px;
            padding-left: 40px;
            padding-top: 20px;
            box-sizing: border-box;
            overflow: hidden;
            z-index: 2;
            box-shadow: 0 0 20px grey;
        }
        
        .box3 {
            background-color: #1c1930;
            width: 450px;
            height: 590px;
            position: absolute;
            right: 230px;
            padding-left: 80px;
            padding-top: 120px;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .box2 a {
            display: block;
            border: 3px solid white;
            color: rgb(253, 253, 253);
            text-decoration: none;
            width: 150px;
            height: 30px;
            text-align: center;
        }
        
        .h4 {
            font-size: 16px;
        }
        
        .box2 h4 {
            color: rgb(164, 114, 221);
        }
        
        .box3 h4 {
            color: white;
        }
        
        p {
            font-size: 12px;
            width: 200px;
            line-height: 20px;
        }
        
        .box3 p {
            color: rgb(112, 111, 111);
        }
        
        .box3 a {
            text-decoration: none;
            text-align: center;
            color: rgb(102, 201, 231);
            background-color: rgb(253, 252, 252);
            display: block;
            width: 125px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            position: absolute;
            bottom: 180px;
        }
    </style>


    <body>
        <div class="box">
            <div class="box1">
                <img class="one" src="https://via.placeholder.com/350x350" alt="">
            </div>
            <div class="box2">
                <h4>EXperience</h4>
                <p>Arcut in Arcut in nulla Arcut in nulla Arcut in nullaArcut in nulla Arcut in nulla Arcut in nullaArcut in nulla </p>
                <a href="first">VIEW PORTYOLIO</a>
            </div>
            <div class="box3">
                <h4>Philosophy</h4>
                <p>Arcut in nulla Arcut in nulla Arcut in nullaArut in nulla Arcut in nulla Arcut in nullaArcut in nulla Arcut in nulla Arcut in nullaArcut in nulla</p>
                <a href="second">LEARN MORE</a>
            </div>
        </div>
    </body>

    <html>